<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./iconmoon/style.css">
    <title>Document</title>
    <style>
        .container{
            background-color: #f3f5f7;
        }
        .container .percent{
            background-color: #fff;
            display: flex;
            border-bottom: 1rem solid rgb(176, 180, 184);
        }
        .container .percent .percentContainer{
           width: 275rem;
        }
        .container .percent .percentContainer .num{
            margin: 36rem auto;
            text-align: center;
            border-right: 1px solid rgb(176, 180, 184);
        }
        .container .percent .percentContainer .num .bigNum{
           font-size: 48rem;
           color: rgb(255, 153, 0);
           line-height: 56rem;
        }
        .container .percent .percentContainer .num .subNum{
           font-size: 24rem;
           color: rgb(7, 17, 27);
           line-height: 24rem;
           margin: 12rem 0 16rem;
        }
        .container .percent .percentContainer .num .desc{
           font-size: 20rem;
           color: rgb(176, 180, 184);
           line-height: 20rem;
        }
        .container .percent .service{
            width: 474rem;
            font-size: 24rem;
            color: rgb(7, 17, 27);
            line-height: 36rem;
        }
        .container .percent .service .serviceContainer{
            margin: 36rem 48rem;
         }
         .container .percent .service .serviceContainer .item{
            display: flex;
            margin-bottom: 16rem;
         }
        .container .percent .service .serviceContainer .item{
            display: flex;
            margin-bottom: 16rem;
        }
        .container .percent .service .serviceContainer .item .starArea{
            display: flex;
            margin: 0 24rem;
        }
        .container .percent .service .serviceContainer .item .starArea .starImg{
            background: url('./img/star36_on@2x.png') no-repeat;
            background-size: cover;
            width: 36rem;
        }
        .container .percent .service .serviceContainer .item .time{
            margin-left: 24rem;
            color: rgb(147, 153, 159);
        }
        .container .classify{
            margin-top: 35rem;
            background-color: #fff;
            border-bottom:  1rem solid #f2f2f3;
        }
        .container .classify ul{
            display: flex;
            padding:36rem 0;
            margin: 0 36rem;
            border-bottom: 1rem solid #f2f2f3;
        }
        .container .classify ul li{
            width: 120rem;
            height: 65rem;
            margin-right: 20rem;
            font-size: 24rem;
            text-align: center;
            line-height: 65rem;
        }
        .container .classify ul li:nth-child(1){
            background-color: #00a0dc;
            color: #fff;
        }
        .container .classify ul li:nth-child(2){
            background-color: #ccecf8;
        }
        .container .classify ul li:nth-child(3){
            background-color: #e9ebec;
        }
        .container .classify .select{
            display: flex;
            color: #b7bbbf;
            padding:30rem 0;
            margin: 0 36rem;
        }
        .container .classify .select .layout-check_circle{
            font-size: 40rem;
            margin-right: 15rem;
        }
        .container .classify .select .desc{
            font-size: 24rem;
            line-height: 24rem;
            align-self: center;
        }
        .container .list{
            width: 100%;
            background-color: #fff;
        }
         .container .list .details{
            padding: 0 36rem
        }
        .container .list .item{
            display: flex;
            border-bottom:  1rem solid #f2f2f3;
            padding: 36rem 0 ;
        }
        .container .list .item .avatar{
            margin-right: 24rem;
            width: 56rem;
            height: 56rem;
            border-radius:50%;
            background: url('./img/111.png') no-repeat;
            background-size: cover;
        }
        .container .list .item .content{
            flex: 1;
         }
        .container .list .item .content .nameAndTime{
            display: flex;
            justify-content: space-between;
            font-size: 20rem;
            line-height: 24rem;
        }
        .container .list .item .content .nameAndTime .name{
            color: rgb(7, 17, 27);
        }
        .container .list .item .content .nameAndTime .time{
            color: rgb(147, 153, 159);
            font-weight: 200;
        }
        .container .list .item .content .starAndtrans{
            margin-top:8rem;
            margin-bottom:12rem;
            display: flex;
        }
         .container .list .item .content .starAndtrans .starList{
             margin-right: 12rem;
             display: flex;
         }
        .container .list .item .content .starAndtrans .starList .starItem{
            margin-right: 12rem;
            width: 20rem;
            height: 20rem;
            background: url('./img/star36_on@2x.png') no-repeat;
            background-size: cover;
        }
        .container .list .item .content .starAndtrans .trans{
            font-size: 20rem;
            font-weight: 200;
            color: rgb(147,153,159);
            line-height: 24rem;
        }
        .container .list .item .content .desc{
            font-size: 24rem;
            color: rgb(7, 17, 27);
            line-height: 36rem;
        }
        .container .list .item .content .goods{
            display: flex;
            margin-top: 16rem;
        }
        .container .list .item .content .goods .isLike.layout-thumb_up{
            font-size: 24rem;
            color: rgb(0,160,220);
            margin-right: 16rem;
            align-items: center;
            text-align: center;
            height: 36rem;
            line-height: 36rem;
        }
        .container .list .item .content .goods .isLike.layout-thumb_down{
            font-size: 24rem;
            color: rgb(183,187,191);
            margin-right: 16rem;
            align-items: center;
            text-align: center;
            height: 36rem;
            line-height: 36rem;
        }
        .container .list .item .content .goods .goodsList{
            display: flex;
        }
        .container .list .item .content .goods .goodsList .goodsItem{
            width: 127rem;
            padding:0 12rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 18rem;
            color: rgb(147,153,159);
            line-height: 32rem;
            border: 1px solid rgb(7, 17, 27,0.1);
            border-radius: 2rem;
            margin-right: 16rem;
            align-self: center;
        }
    </style>
</head>
<body>
     <!-- 去掉头部的评价 -->
    <div id="commend">
        <div class="container">
            <div class='percent'>
                <div class='percentContainer'>
                    <div class='num'>
                        <div class='bigNum'>3.9</div>
                        <div class='subNum'>综合评分</div>
                        <div class='desc'>高于周边商家69.2%</div>
                    </div>
                </div>
                <div class='service'>
                    <ul class='serviceContainer'>
                        <li class='item'> 
                            <div class='title'>服务态度</div>
                            <ul class='starArea'>
                                <li class="starImg"></li>
                                <li class="starImg"></li>
                                <li class="starImg"></li>
                                <li class="starImg"></li>
                                <li class="starImg"></li>
                            </ul>
                            <div class='result' style="color:rgb(255,153,0)">3.9</div>
                        </li>
                        <li class='item'> 
                            <div class='title'>服务态度</div>
                            <ul class='starArea'>
                                <li class="starImg"></li>
                                <li class="starImg"></li>
                                <li class="starImg"></li>
                                <li class="starImg"></li>
                                <li class="starImg"></li>
                            </ul>
                            <div class='result' style="color:rgb(255,153,0)">4.0</div>
                        </li>
                        <li class='item'>
                            <div class='title'>送达时间</div>
                            <div class='time'>44分钟</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class='classify'>
                <ul>
                    <li>全部 57</li>
                    <li>满意 47</li>
                    <li>不满意 10</li>
                </ul>
                <div class='select'>
                    <div class='layout-check_circle'></div>
                    <div class='desc'>只看有内容的评价</div>
                </div>
            </div>
            <div class='list'>
                <ul class='details'>
                    <li class='item'>
                        <div class='avatar'>
                        </div>
                        <div class='content'>
                            <div class='nameAndTime'>
                                <div class='name'>莉***1</div>
                                <div class='time'>2016-07-13 20:33</div>
                            </div>
                            <div class='starAndtrans'>
                                <ul class='starList'>
                                    <li class='starItem'></li>
                                    <li class='starItem'></li>
                                    <li class='starItem'></li>
                                    <li class='starItem'></li>
                                    <li class='starItem'></li>
                                </ul>
                                <div class='trans'>80分钟到达</div>
                            </div>
                            <div class='desc'>
                                这里的东西怎么编,反正我是不会编,反正我是不会编反正我是不会编.
                            </div>
                            <div class='goods'>
                                <div class='isLike layout-thumb_up'></div>
                                <ul class='goodsList'>
                                    <li class='goodsItem'>大王香菇卤肉饭</li>
                                    <li class='goodsItem'>大王香菇卤肉饭</li>
                                    <li class='goodsItem'>大王香菇卤肉饭</li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class='item'>
                        <div class='avatar'>
                        </div>
                        <div class='content'>
                            <div class='nameAndTime'>
                                <div class='name'>莉***1</div>
                                <div class='time'>2016-07-13 20:33</div>
                            </div>
                            <div class='starAndtrans'>
                                <ul class='starList'>
                                    <li class='starItem'></li>
                                    <li class='starItem'></li>
                                    <li class='starItem'></li>
                                    <li class='starItem'></li>
                                    <li class='starItem'></li>
                                </ul>
                                <div class='trans'>80分钟到达</div>
                            </div>
                            <div class='desc'>
                                这里的东西怎么编,反正我是不会编,反正我是不会编反正我是不会编.
                            </div>
                            <div class='goods'>
                                <div class='isLike layout-thumb_down'></div>
                                <ul class='goodsList'>
                                    <li class='goodsItem'>大王香菇卤肉饭</li>
                                    <li class='goodsItem'>大王香菇卤肉饭</li>
                                    <li class='goodsItem'>大王香菇卤肉饭</li>
                                </ul>
                            </div>
                        </div>
                    </li>
            </ul>
            </div>
    
        </div>
    </div>

</body>
<script>
    function adapter(){
        const w = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = w / 750 + "px";
    }
    adapter();
    window.onresize = adapter;
</script>
</html>